function makeScrollable(wrapper, scrollable){
	// Get jQuery elements
	var wrapper = $(wrapper), scrollable = $(scrollable);
	
	// Hide images until they are not loaded
	scrollable.hide();
	var loading = $('<div class="loading">載入圖檔中...</div>').appendTo(wrapper);
	
	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;
		
		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){
				
				loading.hide();
				// Remove scrollbars	
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);
	
	function enable(){
		// height of area at the top at bottom, that don't respond to mousemove
		var inactiveMargin = 99;					
		// Cache for performance
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();
		// Using outer height to include padding too
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		// Do not cache wrapperOffset, because it can change when user resizes window
		// We could use onresize event, but it's just not worth doing that 
		// var wrapperOffset = wrapper.offset();
		
		// Save menu titles
		scrollable.find('a').each(function(){				
			$(this).data('tooltipText', this.title);				
		});
		
		// Remove default tooltip
		scrollable.find('a').removeAttr('title');		
		// Remove default tooltip in IE
		scrollable.find('img').removeAttr('alt');	
		
		var lastTarget;
    function updateText() {
      var tooltip = $("#tooltip");
										
			var currentText = tooltip.text();
			
			if (lastTarget.nodeName == 'IMG'){					
				// We've attached data to a link, not image
				var newText = $(lastTarget).parent().data('tooltipText');
        if(newText !== currentText)
          tooltip.text(newText);
			}
    }
		//When user move mouse over menu			
		wrapper.mousemove(function(e){
			// Save target
			lastTarget = e.target;

			var wrapperOffset = wrapper.offset();
		
			// Scroll menu
			var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
			if (top < 0){
				top = 0;
			}			
			wrapper.scrollTop(top);
      updateText();
		});
		
		// Setting interval helps solving perfomance problems in IE
		wrapper.mouseover(function(){
			if (!lastTarget) return;	
      updateText();
		});
	}
}/*makeScrollable*/
	
function online_order_init() {
  $("#cat1-menu-div").empty().load("cat_all.html .sc_menu", function(){
    makeScrollable("#cat1-menu-div", "#cat1-menu");
    $("#cat1-menu > a").each(function() {
        $(this).data('href', $(this).attr('href'));		
        $(this).removeAttr('href');		
    });

    $("#cat1-menu > a").click(function() {
      var sub_page = $(this).data('href');
      $("#cat2-menu-div").empty().load(sub_page + " .sc_menu", function(){
          makeScrollable("#cat2-menu-div", "#cat2-menu");

        $("#cat2-menu > a").each(function() {
            $(this).data('href', $(this).attr('href'));		
            $(this).removeAttr('href');		
        });

        $("#cat2-menu > a").click(function() {
          eval('var spec = {' + $(this).attr('spec') + '}');

          $('#order_form > input[name$="product_name"]')
            .val($(this).data('tooltipText'))
            .attr('spec', $(this).attr('spec'));
          $('#order_form > select[name$="size"]').change();

          var sub_page = $(this).data('href');
          $("#main_panel .sc_item_detail").children().remove()
            .end().load(sub_page + " .sc_item_detail > *", function() {
          });
        });

      });
    });

  });
  $("#order_form > input[name$='clear_order']").click(function(){
      $("#order_table > tbody").empty()
  });
  $("#order_form > input[name$='remove_last']").click(function(){
      $("#order_table > tbody > tr:last").remove()
  });
  $("#order_form > input[name$='add_item']").click(function(){
      var form = $(this).parent();
      var spec_text = form.find(":input[name='product_name']").attr('spec');
      eval('var spec = {' + spec_text + '}');
      var sub_total = 0;
      var size_obj = form.find(":select[name='size'] option:selected");
      var quant_obj = form.find(":input[name='quantity']");
      if(size_obj.attr('spec') == 'M') {
        sub_total = spec.M * parseInt(quant_obj.val());
      } else if(size_obj.attr('spec') == 'L') {
        sub_total = spec.L * parseInt(quant_obj.val());
      } else {
        sub_total = 99999;
      }
      $("#order_table > tbody").append('<tr>'
        + '<td>'+form.find(":input[name='product_name']").val()+'</td>'
        + '<td>'+size_obj.text()+'</td>'
        + '<td>'+quant_obj.val()+'</td>'
        + '<td>'+form.find(":select[name='sweet'] option:selected").text()+'</td>'
        + '<td>'+form.find(":select[name='ice'] option:selected").text()+'</td>'
        + '<td>'+sub_total+'</td>'
        + '</tr>');
  });
  $("#order_form").submit(function(){ return false;});

  $("#dialog").dialog(
  {
    autoOpen: false,
    bgiframe: true,
    resizable: false,
    draggable: false,
    closeOnEscape: false,
    width:700,
    height:600,
    modal: true,
    overlay: {
      backgroundColor: '#000',
      opacity: 0.5
    },
    buttons: {
      '送出訂單': function() {
        $(this).dialog('close');
        if(myService === undefined){
          //console.log("you haven't login");
        }else {
          //console.log("you have login, create calend event");
          create_order($("#dialog div"));
        }
        $("#order_table tbody").empty();
      },
      '取消': function() {
        $(this).dialog('close');
      }
    },
    open: function() {
      var total = 0;
      $("#order_table > tbody > tr").each(function(){
          if($(this).find("td").length < 5)
            return;
          var sub_total = parseInt($(this).find("td:eq(5)").text());
          total += sub_total;
      });
      $("#dialog div").empty();
      $("#order_table").clone().removeAttr('id').appendTo("#dialog div").append("<div>總記="+total+"</div>");
    }
  }); 

  $("#order_form input[name='send_order']").click(function(){
    $("#dialog").dialog('open');
  });
  $("#order_form").find(":select[name='size']").change(function(){
    var form = $(this).parent();
    var spec_text = form.find(":input[name='product_name']").attr('spec');
    eval('var spec = {' + spec_text + '}');
    if( "M" == $(this).find("option:selected").attr('spec')) {
      form.find(":input[name='price']").val(spec.M);
    }else{
      form.find(":input[name='price']").val(spec.L);
    }
  });

  //ui effect for form
  $("#order_form").find("input[type='button']")
    .addClass("ui-widget ui-state-default ui-corner-all")
    .hover(
    function () {/*over*/
      $(this).addClass("ui-state-hover");
      $(this).removeClass("ui-state-default");
    },
    function () {/*out*/
      $(this).removeClass("ui-state-hover");
      $(this).addClass("ui-state-default");
    }
  );

}

